<template>
  <div>
    <div class="block_item bottom_padding_1389">
      <div class="scale_topic bottom_line">
        <div class="scale_name">{{ info.rating_scale_name }}</div>
        <div class="scale_date">生成于{{ formatDate(info.time * 1000) }}</div>
      </div>
      <div class="inner_title padding_aside_694 margin_1">
        <img class="deraction_img" src="@/assets/images/common/bar.png" alt />
        <div>用户基本信息</div>
      </div>
      <div class="user_info">
        <div class="info_item width_1 info_label border_right border_bottom">
          测评用户
        </div>
        <div class="info_item width_2 info_ctt border_right border_bottom">
          {{ info.user_name }}
        </div>
        <div class="info_item width_3 info_label border_right border_bottom">
          年龄
        </div>
        <div class="info_item width_4 info_ctt border_bottom">
          {{ info.age }}
        </div>
        <div class="info_item width_1 info_label border_right border_bottom">
          联系电话
        </div>
        <div class="info_item width_2 info_ctt border_right border_bottom">
          {{ info.phone || "暂无号码" }}
        </div>
        <div class="info_item width_3 info_label border_right border_bottom">
          性别
        </div>
        <div class="info_item width_4 info_ctt border_bottom">
          {{ info.sex == 1 ? "男" : "女" }}
        </div>
        <div class="info_item width_1 info_label border_right border_bottom">
          注册账号
        </div>
        <div class="info_item width_2 info_ctt border_right border_bottom">
          {{ info.username }}
        </div>
        <div class="info_item width_3 info_label border_right border_bottom">
          编号
        </div>
        <div class="info_item width_4 info_ctt border_bottom">
          {{ info.user_number }}
        </div>
        <div class="info_item width_1 info_label border_right border_bottom">
          账号类型
        </div>
        <div class="info_item width_2 info_ctt border_right border_bottom">
          普通用户
        </div>
        <div class="info_item width_3 info_label border_right border_bottom">
          状态
        </div>
        <div class="info_item width_4 info_ctt border_bottom">
          {{ studentStatus(info.student_status) }}
        </div>
        <!-- <div class="info_item width_1 info_label border_right border_bottom">
          报告解读
        </div>
        <div class="info_item width_5 info_ctt border_bottom">已解读</div> -->
        <div class="info_item width_1 info_label border_right border_bottom">
          报告解读
        </div>
        <div class="info_item width_5 info_ctt border_bottom">
          {{ reportInterpretation(info.is_explain) }}
        </div>
        <div class="info_item width_1 info_label border_right border_bottom">
          所在单位
        </div>
        <div class="info_item width_5 info_ctt border_bottom">
          {{ info.unit_name }}
        </div>
        <div class="info_item width_1 info_label border_right border_bottom">
          所在部门
        </div>
        <div class="info_item width_2 info_ctt border_right border_bottom">
          {{ info.department_name }}
        </div>
        <div class="info_item width_3 info_label border_right border_bottom">
          管理员
        </div>
        <div class="info_item width_4 info_ctt border_bottom">
          {{ info.user_name }}
        </div>
        <!-- <div class="info_item width_6 info_label border_right border_bottom">
          已支付解读费
        </div>
        <div class="info_item width_7 info_ctt border_bottom">10元/次</div> -->
        <!-- <div class="info_item width_6 info_label border_right border_bottom">
          测评收费标准
        </div> -->
        <!-- <div class="info_item width_7 info_ctt border_bottom">￥5元/次</div> -->
        <div class="info_item width_6 info_label border_right border_bottom">
          所属量表分类
        </div>
        <div class="info_item width_7 info_ctt border_bottom">
          {{ info.rating_scale_type_name }}
        </div>
        <div class="info_item width_6 info_label border_right">
          本次测评用时
        </div>
        <div class="info_item width_7 info_ctt">
          {{ calculateTime(info.finish_used_time, 2) }}
        </div>
      </div>
    </div>
    <div class="inner_title padding_aside_694 margin_20">
      <img class="deraction_img" src="@/assets/images/common/bar.png" alt />
      <div>预警信息</div>
    </div>
    <div class="early_warn block_item">
      <div class="item_warn dis_flex">
        <div class="gray_txt">预警等级：</div>
        <div>{{ info.warning_name }}</div>
      </div>
      <div class="item_warn dis_flex">
        <div class="gray_txt">预警项目：</div>
        <div>{{ info.factor_name }}</div>
      </div>
    </div>

    <div class="inner_title padding_aside_694 margin_20">
      <img class="deraction_img" src="@/assets/images/common/bar.png" alt />
      <div>量表统计图</div>
    </div>

    <div class="block_item">
      <div class="statistics_item"></div>
      <div class="color_name">
        <div class="item flex_row flex_align_center" :key="i" v-for="(r, i) in {
          1: info.SelfFactorScore,
          2: info.TaskFactorScore,
          3: info.ConsultOnlineFactorScore,
          4: info.ConsultOfflineFactorScore,
        }[type] || []">
          <div class="color_bar" :style="{ backgroundColor: color[i] }"></div>
          <div class="text nowrap">
            {{ r.factor_name }}
          </div>
        </div>
      </div>
    </div>

    <div class="inner_title padding_aside_694 margin_20">
      <img class="deraction_img" src="@/assets/images/common/bar.png" alt />
      <div>各因子分数详情</div>
    </div>

    <div class="block_item factor_container padding_aside_694">
      <div class="factor_box">
        <div class="factor_row factor_header">
          <div class="factor_col factor_c1 border_right border_bottom">
            因子名称
          </div>
          <div class="factor_col factor_c2 border_right border_bottom">
            总分
          </div>
          <div class="factor_col factor_c3 border_right border_bottom">
            均分
          </div>
          <div class="factor_col factor_c4 border_right border_bottom">
            标准分
          </div>
          <div class="factor_col factor_c5 border_bottom">阳性个数</div>
        </div>
        <div class="factor_row" v-for="(r, i) in {
          1: info.SelfFactorScore,
          2: info.TaskFactorScore,
          3: info.ConsultOnlineFactorScore,
          4: info.ConsultOfflineFactorScore,
          5: info.ResultFactorScore
        }[type] || []" :key="i" :class="{ has_bottom: false }">
          <div class="factor_col factor_c1 border_right">
            {{ r.factor_name }}
          </div>
          <div class="factor_col factor_c2 border_right">{{ r.score }}</div>
          <div class="factor_col factor_c3 border_right">--</div>
          <div class="factor_col factor_c4 border_right">--</div>
          <div class="factor_col factor_c5">--</div>
        </div>
      </div>
    </div>

    <div class="inner_title padding_aside_694 margin_20">
      <img class="deraction_img" src="@/assets/images/common/bar.png" alt />
      <div>各因子分析</div>
    </div>

    <div class="block_item">
      <div class="analysis_item" :class="{ bottom_line: i != 6 - 1 }" v-for="(r, i) in {
        1: info.SelfFactorScore,
        2: info.TaskFactorScore,
        3: info.ConsultOnlineFactorScore,
        4: info.ConsultOfflineFactorScore,
        5: info.ResultFactorScore
      }[type] || []" :key="i">
        <div class="analysis_stage">
          <div class="stage_name">{{ r.factor_name }}:</div>
          <div class="stage_range">
            <div class="stage_progress" :style="{ position: 'relative', '--step': 7 }">
              <!-- <div class="progress_inner"></div> -->
              <!-- <div
                class="stage_score"
                :style="{
                  position: 'absolute',
                  top: -10 + 'px',
                  'z-index': 1000,
                  left: scoreDegree(r.score, r.factorLevelList) + '%',
                  transform: 'translateX(-50%)',
                }"
              >
                {{ r.score }}
              </div> -->
              <div class="stage_score" :style="{
                position: 'absolute',
                top: -10 + 'px',
                'z-index': 1000,
                left: scoreDegree(r.score, r.rating_scale_factor_level) + '%',
                transform: 'translateX(-50%)',
              }">
                {{ r.score }}
              </div>
              <div class="stage_grid" v-for="(item, index) in 7" :key="index + '_'">
                <div class="grid_inner"></div>

                <div class="stage_text" style="transform: translateY(100%)"
                  v-if="index == 0 || index == 3 || index == 6">
                  {{ index == 0 ? "低" : index == 3 ? "中" : "高" }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="analysis_explain">等级概述：{{ r.factor_explain }}</div>
        <div class="analysis_point">{{ r.explain }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { calculateTime, formatDate } from "@/utils/time";
import * as echarts from "echarts";

export default {
  props: {
    info: {
      type: Object,
      default: () => { },
    },
    type: {
      type: Number,  //1是自我测评报告 2是任务测评报告 3是线上测评 4是线下测评 5是团体活动/培训讲座
      default: "",
    },
  },
  data() {
    return {
      color: [
        "#0AA7F4",
        "#ED6942",
        "#F29EC2",
        "#36D5E5",
        "#12B5B0",
        "#6bbbf2",
        "#e69b6b",
        "#d180b2",
        "#94e66a",
        "#d3a65c",
        "#b680e6",
        "#d685d6",
        "#86a7f4",
        "#b1d55b",
        "#b4806b",
        "#e6b294",
        "#d6588d",
        "#6d94e6",
        "#57f49b",
        "#8de663",
        "#b16bb4",
        "#d65bb6",
        "#5ba7d4",
        "#6bb1e6",
        "#e66bb4",
        "#f45880",
        "#f2d66d",
        "#b6e68d",
        "#6be6a1",
        "#63b4f2",
        "#6dd685",
        "#e65580",
      ],
    };
  },
  watch: {
    info: {
      handler(newVal) {
        if (newVal) {
          if (this.type == 1) {
            this.createEcharts(newVal.SelfFactorScore);
          } else if (this.type == 2) {
            this.createEcharts(newVal.TaskFactorScore);
          } else if (this.type == 3) {
            this.createEcharts(newVal.ConsultOnlineFactorScore);
          } else if (this.type == 4) {
            this.createEcharts(newVal.ConsultOfflineFactorScore);
          } else if (this.type == 5) {
            this.createEcharts(newVal.ResultFactorScore);
          }
        }
      },
      deep: true,
    },
  },
  methods: {
    // 创建图表的函数
    createEcharts(val) {
      var chartDom = document.getElementsByClassName("statistics_item")[0];
      var myChart = echarts.init(chartDom);
      var option;
      let data = val.map((item, index) => {
        return {
          value: Number(item.score),
          itemStyle: { color: this.color[index] },
        };
      });

      option = {
        grid: {
          x: 30,
          x2: 30,
          y: 30,
          y2: 40,
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            barWidth: 8, //柱图宽度
            data: [...data],
            type: "bar",
            itemStyle: {
              // borderRadius: 10, // 统一设置四个角的圆角大小
              borderRadius: [10, 10, 0, 0], //（顺时针左上，右上，右下，左下）
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // 计算秒数的函数
    calculateTime,
    // 时间格式化
    formatDate,
  },
  computed: {
    // 计算分数的程度
    scoreDegree() {
      return (score, arr) => {
        return (score / Number(arr[arr.length - 1].high_range)) * 100;
      };
    },
    ...mapState(["INFO"]),
    // 学籍状态
    studentStatus() {
      return (ss) => {
        if (ss == 0) return "不限";
        if (ss == 1) return "在读";
        if (ss == 2) return "已毕业";
        if (ss == 3) return "已退学";
        if (ss == 4) return "休学";
      };
    },
    reportInterpretation() {
      return (is_explain) => {
        if (is_explain == 1) return "未解读";
        if (is_explain == 2) return "申请中";
        if (is_explain == 3) return "已解读";
      };
    },
  },
};
</script>

<style scoped>
.dis_flex {
  display: flex;
  align-items: center;
}

.statistics_item {
  width: 354px;
  height: 200px;
}

.color_name .item {
  margin-left: 25px;
}

.color_name .item {
  margin-bottom: 10px;
}

.margin_20 {
  margin: 10px 0;
}

.color_name .item:nth-child(3n + 1) {
  margin-left: 0;
}

.color_name {
  display: flex;
  align-content: center;
  justify-content: center;
  /* height: 70px; */
  background-color: #fff;
  padding: 0 37px;
  flex-wrap: wrap;
}

.color_name .color_bar {
  width: 11.81px;
  height: 11.81px;
  border-radius: 3.47px;
}

.color_name .text {
  font-size: 12.5px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #555555;
  margin-left: 6.94px;
}

.grey_bg {
  background: #f4f6fa;
  overflow-y: hidden !important;
}

.main_content {
  height: calc(100% - 60px);
  overflow-y: auto;
  padding: 10.42px;
  box-sizing: border-box;
  display: grid;
  gap: 10.42px;
  align-content: flex-start;
}

.text_ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text_justify {
  text-align: justify;
  word-break: keep-all;
}

.block_item {
  width: 100%;
  height: fit-content;
  background: #ffffff;
  border-radius: 6.94px;
  box-sizing: border-box;
}

.bottom_line {
  position: relative;
}

.bottom_line::before {
  display: block;
  width: 100%;
  height: 0.35px;
  background: #dddddd;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
}

.inner_title {
  height: 24.31px;
  font-size: 15.97px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: left;
  color: #333333;
  display: flex;
  align-items: center;
  gap: 10.42px;
}

.deraction_img {
  height: 15.97px;
}

.padding_aside_694 {
  padding-left: 6.94px;
  padding-right: 6.94px;
}

.scale_topic {
  padding: 22.7425px 20.84px 15.4525px 20.84px;
  box-sizing: border-box;
  text-align: center;
}

.scale_name {
  font-size: 18.75px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #333333;
  line-height: 28.125px;
  margin-bottom: 6.945px;
}

.scale_date {
  line-height: 21.875px;
  font-size: 12.5px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 0.5);
}

.margin_1 {
  margin-top: 15.62px;
  margin-bottom: 15.27px;
}

.user_info {
  width: 340.28px;
  height: fit-content;
  background: #ffffff;
  border: 0.35px solid #cccccc;
  border-radius: 3.47px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.border_right {
  border-right: 0.35px solid #cccccc;
}

.border_bottom {
  border-bottom: 0.35px solid #cccccc;
}

.width_1 {
  width: calc(76.74px - 0.35px);
}

.width_2 {
  width: calc(135.76px - 0.35px);
}

.width_3 {
  width: calc(57.29px - 0.35px);
}

.width_4 {
  width: calc(69.44px);
}

.width_5 {
  width: calc(263.19px - 0.35px * 4);
}

.width_6 {
  width: calc(104.51px - 0.35px);
}

.width_7 {
  width: calc(235.42px - 0.35px * 4);
}

.info_item {
  line-height: 24.3px;
  font-size: 13.89px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  box-sizing: border-box;
  padding: 5.21px 10.42px;
}

.info_label {
  text-align: justify;
  word-break: keep-all;
  color: #666666;
}

.info_ctt {
  color: #333333;
  word-break: break-all;
}

.bottom_padding_1389 {
  padding-bottom: 13.89px;
}

.margin_2 {
  margin-top: 1.72px;
  margin-bottom: 1.72px;
}

.factor_container {
  padding-top: 17.36px;
  padding-bottom: 20.83px;
  font-size: 13.89px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: center;
  color: #333333;
}

.factor_box {
  width: 340.28px;
  height: fit-content;
  background: #ffffff;
  border: 0.35px solid #cccccc;
  border-radius: 5.21px;
}

.factor_header .factor_col {
  background: rgba(10, 167, 244, 1);
  color: rgba(241, 250, 255, 1);
  word-break: keep-all;
  text-align: center;
}

.factor_row {
  display: flex;
}

.factor_col {
  padding: 5.21px 3.82px;
  box-sizing: border-box;
}

.factor_c1 {
  width: 89.93px;
}

.factor_col:not(.factor_c1) {
  width: 62.15px;
}

.factor_row:not(.factor_header) {
  display: flex;
}

.factor_row:not(.factor_header) .factor_col:not(.factor_c1) {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .factor_row:not(.factor_header) .factor_col:not(.factor_c1) div{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
} */
.factor_row .factor_col {
  border-bottom: 0.35px solid #cccccc;
}

.has_bottom .factor_col {
  /* border-bottom: 0.35px solid #cccccc; */
}

.analysis_item {
  width: calc(100% - 15.64px * 2);
  margin: 0 auto;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  padding: 5.21px 0;
  box-sizing: border-box;
}

.analysis_stage {
  display: flex;
  gap: 10.42px;
  margin-bottom: 10.42px;
  padding-top: 10px;
  box-sizing: border-box;
}

.stage_name {
  width: 72.05px;
  font-size: 15.28px;
  color: #333333;
  padding-top: 22.57px;
}

.analysis_explain,
.analysis_point {
  font-size: 14.58px;
  color: #333333;
  padding: 5.21px 0;
  box-sizing: border-box;
  line-height: 25px;
}

.stage_range {
  width: calc(100% - 72.05px - 10.42px);
  position: relative;
}

.stage_progress {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--step), calc(100% / var(--step)));
}

.stage_progress::before {
  display: block;
  width: 100%;
  height: 6.25px;
  background: linear-gradient(270deg, #00abff 0%, rgba(10, 167, 244, 0.3) 100%);
  border-radius: 3.13px;
  position: absolute;
  top: 27.78px;
  content: "";
}

/* .progress_inner{
  width: 100%;
  height: 6.25px;
  background: linear-gradient(270deg,#00abff 0%, rgba(10,167,244,0.30) 100%);
  border-radius: 3.13px;
  position: absolute;
  top: 27.78px;
} */
.stage_grid {
  position: relative;
}

.grid_inner {
  width: 100%;
  height: 6.25px;
  border-right: 0.69px solid #ffffff;
  box-sizing: border-box;
}

.stage_grid:last-child .grid_inner {
  border-right-width: 0px;
}

.stage_score {
  position: relative;
  margin-bottom: 1.68px;
}

.stage_score::after {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 10px solid #00abff;
}

.stage_text {
  font-size: 12.5px;
  color: #aaaaaa;
  padding: 5.21px 2.6px;
  box-sizing: border-box;
  text-align: center;
}

.stage_grid:first-child .stage_text {
  padding-left: 0;
  text-align: left;
}

.stage_grid:last-child .stage_text {
  padding-right: 0;
  text-align: right;
}

/* .stage_text{
  position: absolute;
  bottom: 0;
  top: 6.25px;
  height: max-content;
}
.stage_text::after, .stage_text::before{
  display: block;
  content: "";
  clear: both;
} */
.stage_score {
  min-width: 34.72px;
  height: 26.04px;
  background: #0aa7f4;
  border-radius: 4.86px;
  font-size: 14.58px;
  text-align: center;
  color: #ffffff;
  padding: 0 5.21px;
  box-sizing: border-box;
}

.early_warn {
  font-size: 14px;
  line-height: 14px;
  padding: 0 16px;
  color: #333333;
}

.item_warn {
  height: 46.7px;
  line-height: 46.7px;
  border-bottom: 0.33px solid #cccc;
}

item_warn:last-child {
  border-bottom: 0;
}

.gray_txt {
  color: #666666;
}
</style>
